<template>
	<view>
		<view
			style="display: flex;
		background-color:#d33d3e;
		flex-direction:row ;
		flex-wrap:nowrap;
		align-content: center;
		align-items:center;
		justify-content:flex-end;"
		>
			<view
				style="flex: 1;
			display: flex;
			align-items:center; 
			justify-content:space-around;
			align-content: center;"
			>
				<view style="flex: 1;">
					<view class="header">
						<view v-if="headimg">
							<image :src="headimg" mode="widthFix" class="headimg" style="width:140upx;"></image></view>
						<view v-else>
							<image src="/static/logo.png" mode="widthFix" class="headimg" style="width:140upx;"></image></view>
					</view>
				</view>
				<view
					style="flex: 2;
				color: #FFFFFF;
				text-align: center;"
				>
					<view v-if="nickName">{{ nickName }}</view>

					<view v-else>
					
						<!-- #ifdef MP-WEIXIN -->
						<button class="buttonStyle" lang='zh_CN' open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">点击登陆</button>

						<!-- #endif -->
					</view>
				</view>
			</view>
			<view style="flex: 1;text-align: right;padding-right: 40upx;">
				<navigator url="/pages/member/message"><uni-icons type="chat-filled" color="#FFF" size="30" /></navigator>
			</view>
		</view>



<view v-if="openid">

		<view style="display: flex;margin: 10upx 40upx;border-radius: 10upx;border: 1px solid #edeaef;background-color: #FFFFFF;height: 140upx;align-items:center; ">
			<view style="flex: 1;text-align: center;">
				<view class="ftitle">发布</view>
				<view class="fsubtitle">{{ userdata.history ||'0'}}</view>
			</view>
			<view style="flex: 1;text-align: center;">
				<view class="ftitle">回复</view>
				<view class="fsubtitle">{{ userdata.discuss ||'0'}}</view>
			</view>
			<view style="flex: 1;text-align: center;">
				<view class="ftitle">关注</view>
				<view class="fsubtitle">{{ userdata.follow ||'0'}}</view>
			</view>
		</view>

		<uni-list style="background-color:#fdfaff;height: 600upx;">
			<uni-list-item title="历史记录" thumb="/static/logo.png" @click="navTo('/pages/member/history')" />
			<uni-list-item title="我关注的酒" thumb="/static/logo.png" @click="navTo('/pages/member/follow')" />

			<uni-list-item title="关注的用户" thumb="/static/logo.png" @click="navTo('/pages/member/followp')" />

		<!-- 	<uni-list-item title="设置电话" thumb="/static/logo.png" @click="navTo('/pages/member/setting')" /> -->
		</uni-list>




</view>

<view v-else style="padding:100upx 50upx ;text-align: center;font-size: 30upx;color: #555;">
	请先登陆,查看更多内容！
</view>



		<view style="text-align: center;font-size: 20upx;color: #6b6b6b;">
			<image :src="imgSrc+'/'+system.logo" mode="widthFix" style="width: 180upx;"></image>
			
			<view>{{system.name}}</view>
			<!-- <view>
				或直接添加微信Pha
			</view> -->
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
export default {
	components: {
		uniIcons,
		uniList,
		uniListItem
	},
	data() {
		return {
			uid:uni.getStorageSync('userInfo').uid,
			openid:uni.getStorageSync('userInfo').openid,
			headimg: uni.getStorageSync('userInfo').avatarUrl,
			nickName: uni.getStorageSync('userInfo').nickName,
			userdata:{
				history: 0, //发布数量
				discuss: 0, //回复数量
				follow: 0 //关注数量
			},
			imgSrc:this.imgUrl,
			system:''
			
		};
	},
	onLoad() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		this.uid=uni.getStorageSync('userInfo').uid;
		this.openid=uni.getStorageSync('userInfo').openid;
		this.headimg= uni.getStorageSync('userInfo').avatarUrl;
		this.nickName= uni.getStorageSync('userInfo').nickName;
		
		this.loadData();
		this.loadSystem();
	},
	onShow() {
		//uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
	        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	        this.uid=uni.getStorageSync('userInfo').uid;
	        this.openid=uni.getStorageSync('userInfo').openid;
	        this.headimg= uni.getStorageSync('userInfo').avatarUrl;
	        this.nickName= uni.getStorageSync('userInfo').nickName;
	        
			this.loadData();
			this.loadSystem();
	        setTimeout(function () {
	            uni.stopPullDownRefresh();  //停止下拉刷新动画
	        }, 1000);
	},
	methods: {
		loadData(){
			uni.showLoading({
			    title: '登陆中...'
			});
			
			const sendData = {
				"uid": this.uid,
				
			};
			
			uni.request({
				url: this.userApi+'/userdata', //仅为示例，并非真实接口地址。
				data: sendData,
				dataType: 'json',
				method: 'get',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						console.log(res.data );
						
						this.userdata=res.data;
						uni.hideLoading();
					} else {
						uni.hideLoading();
						console.log("数据没有");
					}
				}
			});
			
		},
		loadSystem(){
			uni.request({
				url: this.webUrl+'/system', //仅为示例，并非真实接口地址。
				data: '',
				dataType: 'json',
				method: 'get',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						console.log(res.data );
						this.system=res.data;
						
					} else {
						
						console.log("数据没有");
					}
				}
			});
		},
		getuserinfo: function() {
			uni.showLoading({
			    title: '登陆中...'
			});
			var that = this;
			// wx登录
			wx.login({
				success(res) {
					if (res.code) {
						//发起网络请求
						var code = res.code;

						// 先行获取微信用户信息，一并交给后台处理
						wx.getUserInfo({
							success: function(res) {
								console.log(res.userInfo);
								var yonghuwx = res.userInfo;
								that.headimg= yonghuwx.avatarUrl;
								that.nickName= yonghuwx.nickName;
								
								const sendData = {
									code: code,
									nickName: yonghuwx.nickName,
									avatarUrl: yonghuwx.avatarUrl,
									gender: yonghuwx.gender, //性别 0：未知、1：男、2：女
									province: yonghuwx.province,
									city: yonghuwx.city,
									country: yonghuwx.country
								};

								uni.request({
									url: that.userApi + '/getopenid',
									data: sendData,
									dataType: 'json',
									method: 'POST',
									header: {
										//'content-type': 'application/json' // 微信默认就是
										'content-type': 'application/x-www-form-urlencoded' // 微信默认就是
									},
									success: res => {
										console.log(res.data);
										
										that.openid= res.data.openid;
										
										var userInfo={
											...sendData,
											...res.data
										}
										
										//console.log(userInfo);
										
										uni.setStorage({
											key: 'userInfo',
											data: userInfo,
											success() {
												setTimeout(function () {
												    uni.hideLoading();
												}, 1000);
												//console.log('储存成功');
											}
										});
									}
								});
							},
							fail: res => {
								// 获取失败的去引导用户授权
							}
						});

						console.log(that.yonghuwx);
					} else {
						console.log('没有授权');
					}
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style>
.buttonStyle{width: 110px;border-radius: 0px;border:none;}
	
.header {
	flex: 0.5;
	margin-left: 20upx;
}
.headimg {
	border-radius: 50%;
}
.ftitle {
	font-size: 30upx;
}
.fsubtitle {
	color: #db3542;
	font-size: 34upx;
}
</style>
